<template>
  <div class="comp-history-page"
    layout layout-align="start center">
    
    <el-tag v-for="(item, index) in RouteHistory"
      :key="index"
      :type="item.routeName === currentRoute ? 'warning' : 'info'"
      size="small"
      @click.native="handleClick(item)"
      @close="handleClose(item)"
      :closable="index !== 0">{{ item.name }}</el-tag>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'CompHistoryPage',
  computed: {
    ...mapState([
      'RouteHistory'
    ]),
    currentRoute () {
      return this.$route.name
    }
  },
  methods: {
    handleClick (v) {
      this.$router.push({ name: v.routeName, params: v.params || {} })
    },
    handleClose (v) {
      this.$store.commit('RemoveRouteHistory', v.routeName)
      // 如果关闭的是活动页，则进入最后的历史记录里，都没有则进入首页
      this.$nextTick(() => {
        if (this.currentRoute === v.routeName) {
          const historyLength = this.RouteHistory.length
          const routeName = this.RouteHistory[historyLength - 1].routeName
          this.$router.push({ name: routeName, params: v.params || {} })
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(history-page) {
  width: 100%;
  height: $--history-page-height;
  min-height: $--history-page-height;
  box-shadow: $--history-page-box-shadow;
  overflow-x: auto;

  & > * {
    margin: 0 $--margin-base * .3;
    cursor: pointer;
  }
}
</style>
